<template>
	<view class="subject">
		<MyHeader :isBack="true" title="刷题"></MyHeader>
		<view class="subject-content">
			<view class="subject-common">
				<!-- 定义计数 -->
				<view class="dots">
					<text>1/20</text>
				</view>
				<!-- 中间滑动内容 -->
				<swiper >
					<swiper-item>
						<scroll-view scroll-y="true" >
							<SubjectItem></SubjectItem>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 底部,上下题 -->
		<view class="subject-check">
			<view @tap="gobefor">上一题</view>
			<view class="next" @tap="gonext">下一题</view>
		</view>
	</view>
</template>

<script>
	import MyHeader from '@/common/my-header/my-header.vue'
	import SubjectItem from '@/compontent/subject/subject-item.vue'
	
	export default {
		methods:{
			gobefor(){
				uni.showToast({
					title:'不能往前了~',
					icon:'none'
				})
			},
			gonext(){
				uni.showToast({
					title:'等待更新...',
					icon:'none'
				})
			}
		},
		components:{
			MyHeader,
			SubjectItem
		}
	}
</script>

<style scoped>
	/* 取消滚动条 */
	scroll-view ::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance:none;
		background: transparent;
		color: transparent;
	}
	/* swiper{
		height: auto;
	} */
	.subject{
		position: relative;
		width: 100vw;
		background-color: #f0f3f7;
		box-sizing: border-box;
	}
	.subject-content{
		padding: 0 37rpx;
		width: 100%;
		box-sizing: border-box;
	}
	.dots{
		height: 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #344356;
		opacity: .6;
	}
	.subject-common{
		padding-bottom: 50rpx;
	}
	.subject-check{
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.subject-check view{
		width: 311rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		color: #FFFFFF;
		margin-left: 55rpx;
		background-color: rgb(90,103,247);
	}
	.nect{
		background-color: rgb(90,139,245);
	}
</style>
